import { LeftOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import React from 'react';

import useSetState from '@/hooks/useSetState';

import classes from './index.module.scss';
type Props = {
  tree: React.ReactNode;
  children: React.ReactNode;
};

const TreeTableFrame: React.FC<Props> = ({ tree, children }) => {
  const [{ showleft }, setState] = useSetState({ showleft: true });
  return (
    <div className={classes.wrap}>
      <div className={classNames(classes.left, !showleft && classes.hidden)}>{tree}</div>
      <div className={classes.content}>
        <div
          className={classNames(classes.slider, !showleft && classes.rightArrow)}
          onClick={() => {
            setState({ showleft: !showleft });
          }}
        >
          <LeftOutlined />
        </div>
        {children}
      </div>
    </div>
  );
};

export default TreeTableFrame;
